<template>
    <!-- v-pagePermissions="pagePermissions"  -->
    <div class="white-bg commonBoxmp">
        <TableV2
      @getHeight="getHeight"
      :searchBool="true"
      :column="state.columnData"
      @getCurrentColumns="getCurrentColumns"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    >
      <template #tableHeader>
        <div class="jcb aic w100">
          <h3 class="mx15">基础表格</h3>
          <el-button type="primary"  @click="handleAddMenu"
          >新建</el-button
        >
        </div>
      </template>
      <template #tableContent>
        <div class="flex1">
          <el-table
            class="cP"
            :height="state.height"
            row-key="id"
      
      default-expand-all
            :data="state.tableData"
            @current-change="handleCurrentChangeRow"
          >
            <el-table-column type="index"></el-table-column>
            <el-table-column
              v-for="(item, index) in state.columnData"
              :key="index"
              :label="item.label"
              :prop="item.prop"
            >
              <template
                v-if="item.render && item.prop == 'type'"
                #default="scope"
              >
                <el-link @click="handleGoDetail" type="primary">{{
                  scope.row.type
                }}</el-link>
              </template>
            </el-table-column>

            <el-table-column label="操作" fixed="right" align="right">
              <template #default="scope">
                <el-icon
                  v-if="scope.row.edit"
                  class="mx15"
                  type="primary" link
                  @click="handleEdit(scope.$index, scope.row)"
                  ><check
                /></el-icon>
                <el-button
                  type="primary" link
                  class="mx15"
                  @click="handleAdd(scope.$index, scope.row)"
                  >新增</el-button
                >
                <el-button
                  type="primary" link
                  class="mx15"
                  @click="handleDelete(scope.$index, scope.row)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
      </template>
    </TableV2>

     <el-dialog
    v-model="menuDialog"
    title="添加字典类型"
    width="30%"
  >
  <el-form
    ref="ruleFormRef"
    :model="state.dictForm"
    :rules="rules"
    label-width="120px"
    class="demo-ruleForm"
    status-icon
  >
  <el-form-item label="字典名称" prop="name">
      <el-input v-model="state.dictForm.name"  />
    </el-form-item>
    <el-form-item label="字典类型" prop="type">
      <el-input v-model="state.dictForm.type"  />
    </el-form-item>
    <el-form-item label="状态" prop="status">
      <el-radio-group v-model="state.dictForm.status">
        <el-radio label="1" >正常</el-radio>
        <el-radio label="2" >停用</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="备注" prop="remark">
      <el-input v-model="state.dictForm.remark" type="textarea" />
    </el-form-item>

  </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="menuDialog = false">取消</el-button>
        <el-button type="primary" @click="submitForm(ruleFormRef)">
          保存
        </el-button>
      </span>
    </template>
  </el-dialog>
    </div>
  </template>
  
  <script setup lang="ts">
  import Column from "/@ts/components/table/Column";
  import { ref, reactive, onMounted } from "vue";
  import type { FormInstance, FormRules } from 'element-plus'
  import { useRouter, useRoute } from "vue-router";
  const router = useRouter();
  const route = useRoute();
  
  /*
  基本数据类型
  引用数据类型（复杂类型） 个人建议 ref初始化变量 
  ref 和 reactive 本质我们可以简单的理解为ref是对reactive的二次包装, 
  ref定义的数据访问的时候要多一个.value
  */
  const dialogVisible = ref(true);
  const rules = reactive<FormRules>({

  type: [
    {
      required: true,
      message: '请输入字典类型',
      trigger: 'change',
    },
  ],
  name: [
    {
      required: true,
      message: '请输入字典名称',
      trigger: 'change',
    },
  ],

})
const ruleFormRef = ref<FormInstance>()
const submitForm =  (formEl: FormInstance | undefined) => {
  if (!formEl) return
   formEl.validate((valid, fields) => {
    if (valid) {
      console.log('submit!')
    } else {
      console.log('error submit!', fields)
    }
  })
}

  const state:any = reactive({
    dictForm:{
        resource:"1"
    },
    height:"500px",
    columnData:[
    {
      label: "字典名称",
      prop: "name",
    },
    {
      label: "字典类型",
      prop: "type",
      render: true,
    },
    {
      label: "正常",
      prop: "status",
    },
    {
      label: "备注",
      prop: "remark",
    },
    {
      label: "创建时间",
      prop: "create",
    },
    ],
    tableData:[
        {
            name:"用户性别",
            type:"gender",
            status:"正常",
            remark:"正常",
            create:"2023-1-31",
        },
        {
            name:"菜单状态",
            type:"menu",
            status:"正常",
            remark:"正常",
            create:"2023-1-31",
        },
    ]
  });

  const pageInfo = reactive({
  currentPage: 1,
  total: 10,
  pageSize: 10,
  pageSizes: [10, 20, 30, 40],
  layout: "total, prev, pager, next,sizes",
});
  const getHeight = (height: number) => {
  state.height = height;
};
const handleSizeChange = (size: number) => {
  pageInfo.pageSize = size;
};
const handleCurrentChange = (page: number) => {
  pageInfo.currentPage = page;
};
const getCurrentColumns = (data: Column[]) => {
  state.columnData = data;
};
let menuDialog = ref(false)
const handleAddMenu = () => {
    menuDialog.value = true;
};
const handleGoDetail = () => {

};
  onMounted(() => {});
  </script>
  
  <style scoped lang="scss">
  </style>
  